<template>
<view class="case uni-padding-wrap uni-common-mt" >
	<view class="form form-a" v-if="Object.keys(event).length > 0">
		<view class="form-group">
			<view class="form-item">
				<text class="form-item-header">案卷名称：</text>
				<text class="form-item-body">{{ event.eventName }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">上报时间：</text>
				<text class="form-item-body">{{ event.eventReportTime }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">案卷状态：</text>
				<text class="form-item-body">{{ event.eventStatusName }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">案卷处理状态：</text>
				<text class="form-item-body">{{ event.eventDealStatusName }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">案卷类别：</text>
				<text class="form-item-body">{{ event.eventTypeName }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">案卷大类：</text>
				<text class="form-item-body">{{ event.eventTypeLv1Name }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">案卷小类：</text>
				<text class="form-item-body">{{ event.eventTypeLv2Name }}</text>
			</view>
			<block v-if="event.archivesTypeLeveThree">
				<view class="form-item">
					<text class="form-item-header">立案条件：</text>
					<text class="form-item-body">{{ event.archivesTypeLeveThree.starConditions }}</text>
				</view>
				<view class="form-item">
					<text class="form-item-header">是否延期：</text>
					<text class="form-item-body">{{ event.archivesTypeLeveThree.isYq }}</text>
				</view>
				<view class="form-item">
					<text class="form-item-header">是否缓办：</text>
					<text class="form-item-body">{{ event.archivesTypeLeveThree.isHb }}</text>
				</view>
				<view class="form-item text-alert">
					<text class="form-item-header">安全隐患：</text>
					<text class="form-item-body">{{ (event.archivesTypeLeveThree.isJj == '否' && event.archivesTypeLeveThree.isTfjj == '否') ? '否' : '是'}}</text>
				</view>
				<view class="form-item text-alert">
					<text class="form-item-header">应急突发：</text>
					<text class="form-item-body">{{ event.archivesTypeLeveThree.isTfjj }}</text>
				</view>
			</block>
			<view class="form-item">
				<text class="form-item-header">发生街道：</text>
				<view class="form-item-body">{{ event.regionlv4name }}</view>
			</view>
			<view class="form-item">
				<text class="form-item-header">责任主体：</text>
				<text class="form-item-body"> {{ event.deptParentName }} </text>
			</view>
			<view class="form-item">
				<text class="form-item-header">所属部门：</text>
				<text class="form-item-body">{{ event.deptName }}</text>
			</view>
			<view class="form-item">
				<text class="form-item-header">发生位置：</text>
				<view class="form-item-body">
					<view class="card card-address" @tap="openMap(event);">
						<view class="card-content">
							{{ event.eventAddress }}
							<view class="card-icon" v-show="event.eventAddress">
								<image class="icon" src="@/static/icon/iv_location.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item form-item-ver">
				<view class="form-item-header">案卷描述：</view>
				<view class="form-item-body">{{ event.eventDescribe }}</view>
			</view>
		</view>
	</view>
	
	<view class="step step-a">
		<view class="step-group">
			<view 
				class="step-item" 
				:class="{begin: index == 0,end: index === (logs.length - 1)}" 
				v-for="(log, index) in logs" 
				:key="index">
				<view class="step-item-line">
					<view class="step-item-check"></view>
				</view>
				<view class="panel">
					<view class="panel-angle"></view>
					<view class="panel-header">
						<view class="panel-item-top">{{ log.typeName }}</view>
						<view class="panel-item-bot">{{ log.createTime }}</view>
					</view>
					<view class="panel-body">
						<view class="panel-item">
							{{ log.describe }}
						</view>
						<view 
							v-if="log.remark" 
							class="panel-item">
							{{ log.remark }}
						</view>
						
						<swiper v-if="log.images.length > 0" class="panel-item-wrap" :indicator-dots="true" indicator-active-color="#f29004">
							<swiper-item  v-for="(image, index) in log['smallImages'][0] ? log['smallImages'] : log['bigImages']" :key="index">
								<view
									class="panel-item-pic" 
									@tap="viewPic(log['bigImages'], index)">
									<!-- 
									<view class="spinner-box">
										<view class="spinner">
										  <view class="rect1"></view>
										  <view class="rect2"></view>
										  <view class="rect3"></view>
										  <view class="rect4"></view>
										  <view class="rect5"></view>
										</view>
									</view>
									-->
									
									<image 
										class="pic" 
										mode="aspectFit" 
										:src="image['path']" >
									</image>
									
								</view>
							</swiper-item>
						</swiper>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
	
	<view class="btns fix-bottom" >
		<view class="btns-group" v-if="roleKey == 'czry'">
			<view class="btns-item" v-if="event.eventDealStatus == '0202'">
				<button class="btn btn-a" @tap="dispose(1)">立即处理</button>
			</view>
			<view class="btns-item" v-if="event.eventDealStatus == '0202'">
				<button class="btn btn-b" @tap="dispose(2)">退回案件</button>
			</view>
		</view>
		<view class="btns-group" v-if="roleKey == 'xjy'">
			<view class="btns-item" v-if="event.eventDealStatus == '0101' || event.eventDealStatus == '0204'">
				<button class="btn btn-a" @tap="dispose(1)">立即处理</button>
			</view>
			<view class="btns-item" v-if="event.eventStatus === '0100' || (event.eventStatus === '0200' && (event.eventDealStatus == '0202' || event.eventDealStatus == '0201'))">
				<button class="btn btn-a" @tap="trace">追踪</button>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import { queryEventDetail } from '@/api/configure.js';
import { deepClone, mergeUrls, getUserInfo, previewImage} from '@/util/util.js';
import configUrl from '@/util/url.js';
export default {
	data() {
		return {
			userId: '',
			roleKey: '',
			eventId: '',
			event: {
				eventDealStatus: ''
			},
			logs: [],
		}
	},
	methods: {
		dispose(type) {
			// 1 处置
			// 2 回退
			let params = {
				type: type,
				gdx: this.event.gdx,
				gdy: this.event.gdy,
				eventId: this.eventId,
				eventAddress: this.event.eventAddress,
				eventSrcType: this.event.eventSrcType,
				eventDealStatusName: this.event.eventDealStatusName,
				eventDealStatus: this.event.eventDealStatus,
				eventStatus: this.event.eventStatus
			};
			
			let url = mergeUrls('/pages/case/dispose', params);
			
			uni.navigateTo({
				url: url
			});
		},
		trace() {
			let data = {
				eventId: this.eventId
			}
			
			let url = mergeUrls('/pages/case/trace', data);
			
			uni.navigateTo({
			    url
			});
		},
		openMap(eve){
			let params = {
				gdx: eve.gdx,
				gdy: eve.gdy,
				type: 'VIEW'
			}
			
			let url = mergeUrls('/pages/map/index', params);
			
			uni.navigateTo({
				url: url
			});
		},
		getEventDetail() {
			let data = {
				eventId: this.eventId
			};
			
			queryEventDetail(data).then((res) => {
				this.event = deepClone(res.data.event);
				let logs = deepClone(res.data.eventLog);
				
				this.logs = logs.map((log) => {
					if(log.images){
						let images = JSON.parse(log.images);
						
						log.images = images.map((image) => {
							image.path = configUrl.CASEIMAGE_URL + image.path.substr(1);
							return image
						});
						
						log.bigImages = [];
						log.smallImages = [];
						
						log.images.forEach((image) => {
							if(image.size_type == '1'){
								log.bigImages.push(image)
							} else {
								log.smallImages.push(image)
							}
						})
					}
					
					return log
				})
			})
		},
		viewPic(images, index) {
			let urls = [];
			
			urls = images.map( image => image['path']);
			
			// previewImage({
			// 	urls: urls,
			// 	current: index
			// })
			
			let data = {
				picUrl: urls[index]
			};
			
			let url = mergeUrls('/pages/case/viewPic', data);
			
			uni.navigateTo({
			    url
			});
		},
		init() {
			let userInfo = getUserInfo();
						
			if (userInfo) {
				this.userId = userInfo['userId'];
				this.roleKey = userInfo['roles'][0]['roleKey'];
			}
			
			
			this.getEventDetail();
			
			uni.$on('case.case.refresh', this.getEventDetail);
		}
	},
	onLoad(option) {
		this.eventId = option.eventId;
		this.init()
	},
	onUnload() {
		uni.$off('case.case.refresh');
	}
}
</script>

<style lang="scss">
	.case{
		padding-bottom: 100rpx;
	}
	.form{}
	.form-a{
		color: #767676;
		.form-group{
			.form-item{
				padding: 6rpx 0rpx;
				margin-bottom: 8rpx;
				display: flex;
				.form-item-header{
					width: 190rpx;
					font-size: 36rpx;
					line-height: 120%;
				}
				
				.form-item-body{
					box-sizing: border-box;
					padding-left: 10rpx;
					width: calc(100% - 190rpx);
					font-size: 36rpx;
					line-height: 120%;
				}
				&.form-item-ver{
					flex-direction: column;
					.form-item-header{
						width: 100%;
						margin-bottom: 10rpx;
					}
					.form-item-body{
						width: 100%;
						padding: 20rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
					}
				}
			}
			.text-alert{
				color: #dd524d;
			}
		}
	}
	
	.card{
		
	}
	.card-address{
		.card-icon{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 0px;
			right: 0px;
			.icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.card-content{
			position: relative;
			top: 0rpx;
			left: 0rpx;
			padding-right: 40rpx;
			display: inline-block;
		}
	}
	
	.step{}
	.step-a{
		background-color: #ececec;
		.step-group{
			padding: 40rpx 0rpx;
			.step-item{
				padding: 0rpx 40rpx 40rpx 90rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				.step-item-line{
					width: 4rpx;
					position: absolute;
					top: 0rpx;
					left: 50rpx;
					bottom: 0rpx;
					background-color: #f29004;
					.step-item-check{
						position: absolute;
						top: 20rpx;
						left: 50%;
						width: 32rpx;
						height: 30rpx;
						margin-left: -16rpx;
						border-radius: 50%;
						background-color: #f29004;
					}
				}
				&.begin{
					.step-item-line{
						top: 20rpx;
						.step-item-check{
							top: 0rpx;
						}
					}
				}
				&.end{
					padding-bottom: 0rpx;
				}
			}
		}
	}
	
	.panel{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.panel-angle{
			width: 0;
			height: 0;
			border-right: 16rpx solid #f29004;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
			border-left: 16rpx solid transparent;
			position: absolute;
			top: 20rpx;
			left: -32rpx;
		}
		.panel-header{
			padding: 10rpx 20rpx;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			background-color: #f29004;
			.panel-item-top{
				margin-bottom: 10rpx;
				font-size: 36rpx;
				line-height: 120%;
				color: #ffffff;
			}
			.panel-item-bot{
				font-size: 38rpx;
				line-height: 120%;
				color: #ffffff;
			}
		}
		.panel-body{
			padding: 10rpx 20rpx 30rpx;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			background-color: #ffffff;
			.panel-item-wrap{
				height: 600rpx;
			}
			.panel-item{
				margin-bottom: 20rpx;
				font-size: 36rpx;
				line-height: 120%;
				color: #767676;
			}
			.panel-item-pic{
				height: 600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				.spinner-box{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.spinner{
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 1;
					transform: translate(-50%, -50%);
				}
				.pic{
					position: absolute;
					top: 0px;
					left: 0px;
					z-index: 99;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.btns{
		background-color: #ffffff;
		.btns-group{
			padding: 17rpx 20rpx;
			display: flex;
			.btns-item{
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}
		
	}
	
	.btn{
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;
		&:after{
			display: none;
		}
		&.btn-a{
			background-color: #c7af54;
		}
		&.btn-b{
			background-color: #ff3030;
		}
	}
	
	.fix-bottom{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
	}
	
	
	.spinner {
	  width: 50px;
	  height: 40px;
	  text-align: center;
	  font-size: 10px;
	}
	 
	.spinner > view {
	  background-color: #f29004;
	  height: 100%;
	  width: 6px;
	  margin: 0rpx 2rpx;
	  display: inline-block;
	  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	  animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}
	 
	.spinner .rect2 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}
	 
	.spinner .rect3 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}
	 
	.spinner .rect4 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}
	 
	.spinner .rect5 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}
	 
	@-webkit-keyframes sk-stretchdelay {
	  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	  20% { -webkit-transform: scaleY(1.0) }
	}
	 
	@keyframes sk-stretchdelay {
	  0%, 40%, 100% { 
	    transform: scaleY(0.4);
	    -webkit-transform: scaleY(0.4);
	  }  20% { 
	    transform: scaleY(1.0);
	    -webkit-transform: scaleY(1.0);
	  }
	}
</style>
